<!-- src/views/content/ContentLayout.vue -->
<template>
  <Header class="headerbox" :navShow="false" />
  <div class="content-container">
    <!-- 左侧导航栏 -->
    <div class="sidebar">
      <nav>
        <router-link to="/" active-class="active" class="sidebar_item" style="color: rgb(255, 255, 255, 0.7)">
          <i class="iconfont icon-shouye16"></i>
          <span>{{ $t('tabbar.Home') }}</span>
        </router-link>
        <router-link to="/content/market" active-class="active" class="sidebar_item" :style="
          pageTitle == 'market'
            ? 'color:rgb(88, 156, 248)'
            : 'color:rgb(255, 255, 255,.7)'
        ">
          <i class="iconfont icon-shuju"></i>
          <span>{{ $t('tabbar.Market') }}</span>
        </router-link>
        <router-link to="/content/trade" active-class="active" class="sidebar_item" :style="
          pageTitle == 'trade'
            ? 'color:rgb(88, 156, 248)'
            : 'color:rgb(255, 255, 255,.7)'
        ">
          <i class="iconfont icon-jiaoyi"></i>
          <span>{{ $t('tabbar.Transaction') }}</span>
        </router-link>
        <router-link to="/content/news" active-class="active" class="sidebar_item" :style="
          pageTitle == 'news'
            ? 'color:rgb(88, 156, 248)'
            : 'color:rgb(255, 255, 255,.7)'
        ">
          <i class="iconfont icon-xinwenliebiao"></i>
          <span>{{ $t('tabbar.News') }}</span>
        </router-link>
        <router-link to="/content/ipo" active-class="active" class="sidebar_item" :style="
          pageTitle == 'ipo'
            ? 'color:rgb(88, 156, 248)'
            : 'color:rgb(255, 255, 255,.7)'
        ">
          <i class="iconfont icon-otc"></i>
          <span>{{ $t('tabbar.IPO') }}</span>
        </router-link>
        <router-link to="/content/otc" active-class="active" class="sidebar_item" :style="
          pageTitle == 'otc'
            ? 'color:rgb(88, 156, 248)'
            : 'color:rgb(255, 255, 255,.7)'
        ">
          <i class="iconfont icon-IPO1"></i>
          <span>{{ $t('tabbar.OTC') }}</span>
        </router-link>
      </nav>
      <div class="bottom_content">
        <router-link to="/content/otc" active-class="active" class="sidebar_item" style="color: rgb(255, 255, 255, 0.7)">
          <i class="iconfont icon-kefu"></i>
          <span>{{ $t('tabbar.Service') }}</span>
        </router-link>
      </div>
    </div>

    <!-- 右侧内容区域 -->
    <div class="content">
      <!-- 头部数据 -->
      <div class="header_text" v-if="pageNav">
        <p v-if="pageTitle === 'trade' " class="title">{{ $t('tabbar.Transaction') }}</p>
        <p v-if="pageTitle === 'ipo'" class="title">{{ $t('tabbar.IPO') }}</p>
        <p v-if="pageTitle === 'otc'" class="title">{{ $t('tabbar.OTC') }}</p>
        <p v-if="pageTitle === 'market'" class="title">{{ $t('tabbar.Market') }}</p>
        <p v-if="pageTitle === 'news'" class="title">{{ $t('tabbar.News') }}</p>
        <div class="btn_content" v-if="pageTitle == 'ipo'">
          <div class="btn" @click="handleSubRecord('')">
            <i class="iconfont icon-xinwenliebiao"></i>
            <p>{{ $t('tabbar.shenji') }}</p>
          </div>
          <div class="btn btn2" @click="handleSubRecord('won')">
            <i class="iconfont icon-zhongjiangjilu"></i>
            <p>{{ $t('tabbar.zhongji') }}</p>
          </div>
        </div>
        <div class="order_content" v-if="pageTitle == 'otc'">
          <div class="order_item" @click="handleUserOtcOrder()">
            <i class="iconfont icon-xinwenliebiao"></i>
            <p class="text">{{ $t('tabbar.dingdan') }}</p>
          </div>
        </div>
      </div>
      <router-view class="content_wrapper" :style="pageNav ? 'padding-top:50px;' : ''" />
      <!-- 子路由内容将在这里渲染 -->

      <TradingViewTickerTape :symbols="customSymbols" locale="zh" display-mode="regular" />
    </div>
  </div>
  <!-- 申购ipo的弹框 -->
  <div v-if="showPopup1028" class="mask1025">
    <div class="popup-container1025">
      <div class="header">
        <p class="title">{{ clickType == "" ? t('tabbar.shenji') : t('tabbar.zhongji') }}</p>
        <CloseBold class="close-icon1025" style="color: #fff" @click="showPopup1028 = false" />
      </div>
      <div class="list" ref="subscription" @scroll="handleScroll('ipo')" v-if="listLength">
        <div class="item" v-for="(item, index) in stockOrder" :key="index">
          <div class="item_top">
            <p class="name">{{ item.stock_name }}</p>
            <div class="item_name">
              <p class="type">US</p>
              <span class="text">{{ item.symbol }}</span>
              <div class="item_type">
                <p class="waiti_win color2" v-if="item.subscribe_status == 'subscribing'">
                  {{ $t('tabbar.shenz') }}
                </p>
                <p class="waiti_win color1" v-if="item.subscribe_status == 'won'">
                  {{ $t('tabbar.yiz') }}
                </p>
                <p class="waiti_win color3" v-if="item.subscribe_status == 'not_won'">
                  {{ $t('tabbar.weiz') }}
                </p>
              </div>
            </div>
          </div>
          <div class="item_content">
            <div class="item">
              <p class="name">{{ $t('tabbar.jiage') }}</p>
              <span class="value">{{ item.subscribe_price }}(USD)</span>
            </div>
            <div class="item">
              <p class="name">{{ $t('tabbar.shenl') }}</p>
              <span class="value">{{ item.subscribe_quantity }}{{ $t('tabbar.gu') }}</span>
            </div>
            <div class="item">
              <p class="name">{{ $t('tabbar.zhongq') }}</p>
              <span class="value">{{ item.winning_quantity }}{{ $t('tabbar.gu') }}</span>
            </div>
            <div class="item">
              <p class="name">{{ $t('tabbar.peil') }}</p>
              <span class="value">{{ item.delivery_quantity }}{{ $t('tabbar.gu') }}</span>
            </div>
          </div>
          <div class="item_bottom">
            <div class="item">
              <p class="name">{{ $t('tabbar.shenb') }}</p>
              <span class="value">{{ item.subscribe_number }}</span>
            </div>
            <div class="item">
              <p class="name">{{ $t('tabbar.shens') }}</p>
              <span class="value">{{ item.add_time }}</span>
            </div>
            <div class="item">
              <p class="name">{{ $t('tabbar.chouri') }}</p>
              <span class="value">{{ item.lottery_date }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="noData" v-else>
        <i class="iconfont icon-meiyougengduo"></i>
        <span class="noData_text">{{ $t('trade.meiyougeng') }}</span>
      </div>
    </div>
  </div>
  <!-- otc弹框 -->
  <div v-if="showPopup1029" class="mask1025">
    <div class="popup-container1025">
      <div class="header">
        <p class="title">{{ $t('tabbar.dingdan') }}</p>
        <CloseBold class="close-icon1025" style="color: #fff" @click="showPopup1029 = false" />
      </div>
      <div class="order_content" ref="otcContent" @scroll="handleScroll('otc')">
        <div class="order_item" v-for="(item, index) in otcList" :key="index">
          <div class="item_top">
            <p class="type">US</p>
            <span class="name">{{ item.stock_name }}</span>
          </div>
          <div class="item_list">
            <div class="item">
              <p class="key">{{ $t('tabbar.gum') }}</p>
              <p class="value">{{ item.symbol }}</p>
            </div>
            <div class="item add_content">
              <p class="key">{{ $t('tabbar.guaj') }}</p>
              <p class="value">{{ item.subscribe_price }}</p>
            </div>
            <div class="item add_right">
              <p class="key">{{ $t('tabbar.gouz') }}</p>
              <p class="value">{{ item.subscribe_quantity }}</p>
            </div>
            <div class="item add_top">
              <p class="key">{{ $t('tabbar.fangxiang') }}</p>
              <p class="value add_color">{{ $t('tabbar.mair') }}</p>
            </div>
            <div class="item add_right add_top">
              <p class="key">{{ $t('tabbar.zhuangtai') }}</p>
              <p class="value color2" v-if="item.review_status == 'pending'">
                {{ $t('tabbar.shenhezhong') }}
              </p>
              <p class="value color1" v-if="item.review_status == 'approved'">
                {{ $t('tabbar.tongguo') }}
              </p>
              <p class="value color3" v-if="item.review_status == 'rejected'">
                {{ $t('tabbar.jujue') }}
              </p>
            </div>
            <div class="item add_time add_top">
              <p class="key">{{ $t('tabbar.chuangs') }}</p>
              <p class="value">{{ item.subscribe_time }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useI18n } from "vue-i18n"; // 从 vue-i18n 导入 useI18n
import Header from "../../components/Header.vue";
// import Scroll from "../../components/scroll.vue";
import TradingViewTickerTape from "../../components/TradingViewTickerTape.vue"

import { useRoute } from "vue-router";
import { onMounted, computed, ref } from "vue";
import { userStockOrder, getOtcOrder } from "../../api/stock.js";
import {
  convertToUSFormat,
  convertEnglishDateToChinese,
} from "../../utils/util.js";
import bus from "../../utils/event-bus.js";
import { throttle } from "lodash";

const { t, locale } = useI18n();


const route = useRoute();
const pageTitle = computed(() => route.meta.title || "默认标题");
const pageNav = computed(() => route.meta.nav || false);
const showPopup1028 = ref(false);
const stockOrder = ref([]);
const page = ref(1);
const isScrolling = ref(false);
const subscription = ref(null);
const listLength = ref(1);
const clickType = ref("");
const showPopup1029 = ref(false);
const otcList = ref([]);
const otcContent = ref(null);
// const ipoContentLeft = ref(null)
// const lang = ref('')
onMounted(() => {
  // lang.value = ;
  bus.on("showOtcOrder", (data) => {
    handleUserOtcOrder()
  })
  // console.log("index的数据得语言----",lang)
});

// 获取OTC订单
const handleUserOtcOrder = async () => {
  console.log("点击了----");
  showPopup1029.value = true;
  const data = {
    page: page.value,
  };
  const res = await getOtcOrder(data);
  if (res.code == 200) {
    listLength.value = res.data.data ? res.data.data.length : 0;
    // 根据语言配置时间
    if (localStorage.getItem("lang") == "en") {
      res.data.data.forEach((item) => {
        item.subscribe_time = convertToUSFormat(item.subscribe_time);
      });
    } else {
      stockOrder.value.forEach((item) => {
        item.subscribe_time = convertEnglishDateToChinese(item.subscribe_time);
      });
    }
    if (page.value == 1) {
      otcList.value = res.data.data;
    } else {
      otcList.value = otcList.value.concat(res.data.data);
    }
  }
};
const handleSubRecord = (type) => {
  clickType.value = type;
  showPopup1028.value = true;
  listLength.value = 1;
  if (type == "") {
    // 申购的所有记录
    getUserStockOrder("");
  } else if (type == "won") {
    // 已中奖
    getUserStockOrder("won");
  }
};
const getUserStockOrder = async (type) => {
  const data = {
    page: page.value,
  };
  if (type) {
    data.subscribe_status = type;
  }
  const res = await userStockOrder(data);
  if (res.code == 200) {
    if (localStorage.getItem("lang") == "en") {
      res.data.data.forEach((item) => {
        item.add_time = convertToUSFormat(item.add_time);
        item.lottery_date = convertToUSFormat(item.lottery_date);
      });
    } else {
      stockOrder.value.forEach((item) => {
        item.add_time = convertEnglishDateToChinese(item.add_time);
        item.lottery_date = convertEnglishDateToChinese(item.lottery_date);
      });
    }

    listLength.value = res.data.data ? res.data.data.length : 0;
    if (page.value == 1) {
      stockOrder.value = res.data.data;
    } else {
      stockOrder.value = stockOrder.value.concat(res.data.data);
    }
  }
};
const handleScroll = throttle((type) => {
  if (type == "ipo") {
    if (listLength.value == 10) {
      if (clickType.value == "") {
        const container = subscription.value;
        console.log("container===", container);
        if (
          container.scrollTop + container.clientHeight >=
          container.scrollHeight - 50
        ) {
          if (!isScrolling.value) {
            isScrolling.value = true;
            // 使用 requestAnimationFrame 优化性能
            requestAnimationFrame(() => {
              page.value++;
              getUserStockOrder("");
              isScrolling.value = false;
            });
          }
        }
      } else if (clickType.value == "won") {
        const container = subscription.value;
        if (
          container.scrollTop + container.clientHeight >=
          container.scrollHeight - 50
        ) {
          if (!isScrolling.value) {
            isScrolling.value = true;
            // 使用 requestAnimationFrame 优化性能
            requestAnimationFrame(() => {
              page.value++;
              getUserStockOrder("won");
              isScrolling.value = false;
            });
          }
        }
      }
    }
  } else if (type == "otc") {
    if (listLength.value == 10) {
      const container = otcContent.value;
      if (
        container.scrollTop + container.clientHeight >=
        container.scrollHeight - 50
      ) {
        if (!isScrolling.value) {
          isScrolling.value = true;
          // 使用 requestAnimationFrame 优化性能
          requestAnimationFrame(() => {
            page.value++;
            handleUserOtcOrder();
            isScrolling.value = false;
          });
        }
      }
    }
  }
}, 500);
</script>

<style scoped lang="less">
.mask1025 {
  .popup-container1025 {
    width: 600px;
    height: 70%;
    padding: 15px;
    border-radius: 10px;

    .header {
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #3c3e47;
    }

    .order_content {
      width: 100%;
      height: calc(100% - 50px);
      padding: 15px;
      overflow: hidden;
      overflow-y: auto;

      .order_item {
        width: 100%;

        .item_top {
          width: 100%;
          display: flex;
          align-items: center;

          .type {
            background-color: rgba(0, 123, 255, 0.1);
            color: #007bff;
            border-radius: 3px;
            font-size: 10px;
            padding: 2px 5px;
            box-sizing: border-box;
            border: none;
            font-style: normal;
            margin-right: 10px;
          }

          .name {
            font-weight: 700;
            font-size: 16px;
          }
        }

        .item_list {
          width: 100%;
          padding-bottom: 15px;
          margin-bottom: 15px;
          margin-top: 15px;
          // margin-left:15px;
          // margin-right:15px;
          border-bottom: 1px solid #3c3e47;
          display: flex;
          align-items: center;
          justify-content: space-between;
          flex-wrap: wrap;

          .item {
            width: 33%;
            display: flex;
            flex-direction: column;

            .key {
              color: #fff;
              opacity: 0.5;
              font-size: 12px;
            }

            .value {
              font-size: 14px;
              margin-top: 5px;
              color: #fff;
              margin-top: 5px;
            }

            .add_color {
              color: #27c77e;
            }

            .color1 {
              color: #27c77e;
            }

            .color2 {
              color: #f90;
            }

            .color3 {
              color: #f56c6c;
            }
          }

          .add_time {
            width: 100%;
            display: flex;
            align-items: center;
            flex-direction: row;
            justify-content: space-between;
          }

          .add_content {
            text-align: center;
          }

          .add_right {
            text-align: right;
          }

          .add_top {
            margin-top: 10px;
          }
        }
      }
    }

    .list {
      width: 100%;
      padding-top: 15px;
      height: calc(100% - 50px - 15px);
      overflow: hidden;
      overflow-y: scroll;

      .item {
        border-radius: 10px;
        border: 1px solid #3c3e47;
        padding: 15px;
        margin-bottom: 15px;
        background-color: #202b2c;

        .item_top {
          width: 100%;

          .name {
            font-size: 15px;
            color: #fff;
            margin-bottom: 5px;
          }

          .item_name {
            display: flex;
            align-items: center;

            .type {
              background-color: rgba(0, 123, 255, 0.1);
              color: #007bff;
              border-radius: 3px;
              font-size: 10px;
              padding: 2px 5px;
              box-sizing: border-box;
              border: none;
              margin-right: 10px;
            }

            .text {
              color: #fff;
              opacity: 0.6;
              margin-right: 10px;
              font-size: 14px;
            }

            .item_type {
              display: flex;
              align-items: center;

              .waiti_win {
                color: #fff;
                border-radius: 3px;
                font-size: 10px;
                padding: 2px 5px;
                box-sizing: border-box;
                border: none;
              }

              .color1 {
                background-color: #27c77e;
              }

              .color2 {
                background-color: #f90;
              }

              .color3 {
                background-color: rgb(245, 108, 108);
              }
            }
          }
        }

        .item_content {
          margin-top: 10px;
          padding: 10px 0;
          border-top: 1px solid #3c3e47;
          border-bottom: 1px solid #3c3e47;
          display: flex;
          align-items: center;
          flex-wrap: wrap;

          .item {
            border: none;
            width: 33%;
            display: flex;
            flex-direction: column;
            padding: 0;
            margin: 4px 0;

            .name {
              color: #fff;
              opacity: 0.5;
              font-size: 11px;
            }

            .value {
              color: #fff;
              opacity: 0.9;
              font-size: 14px;
              margin-top: 4px;
            }
          }

          .item:nth-child(3n + 2) {
            text-align: center;
          }

          .item:nth-child(3n) {
            text-align: right;
          }
        }

        .item_bottom {
          padding-top: 11px;

          .item {
            border: none;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 4px;
            margin-bottom: 0px;

            .name {
              color: #fff;
              opacity: 0.5;
              font-size: 11px;
            }

            .value {
              font-size: 13px;
              color: #fff;
            }
          }
        }
      }
    }

    .noData {
      width: 100%;
      height: calc(100% - 50px);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .iconfont {
        font-size: 100px;
        color: #fff;
        opacity: 0.7;
      }

      .noData_text {
        font-size: 14px;
        color: #fff;
        opacity: 0.7;
      }
    }
  }
}

.content-container {
  display: flex;
  height: calc(100vh - 60px);
  // min-width: 1200px;
  background-color: #18191e;

  .sidebar {
    width: 100px;
    min-width: 100px;
    margin-right: 10px;
    min-height: 700px;
    background-color: #202b2c;
    position: relative;

    .bottom_content {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);

      /* 向左移动自身宽度的50% */
      a {
        display: flex;
        padding: 5px;
        box-sizing: border-box;
        margin-bottom: 15px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;

        //  color:#fff;
        //  opacity: .7;
        .iconfont {
          font-size: 24px;
          margin-bottom: 5px;
        }
      }
    }

    nav {
      display: flex;
      flex-direction: column;
      /* gap: 10px; */
      padding-top: 20px;
      box-sizing: border-box;

      a {
        display: flex;
        padding: 5px;
        box-sizing: border-box;
        margin-bottom: 15px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;

        //  color:#fff;
        //  opacity: .7;
        .iconfont {
          font-size: 24px;
          margin-bottom: 5px;
        }

        span {
          font-size: 14px;
        }
      }
    }
  }
}

.content {
  flex: 1;
  overflow: auto;
  // min-width: 1200px;
  position: relative;

  .content_wrapper {
    overflow-y: auto;
  }

  .header_text {
    position: absolute;
    width: 100%;
    min-width: 500px;
    padding: 0 15px;
    box-sizing: border-box;
    background-color: #202b2c;
    color: #fff;
    font-size: 14px;
    height: 50px;
    // z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .btn_content {
      height: 30px;
      // border:1px solid red;
      display: flex;
      align-items: center;
      justify-content: flex-end;

      .btn {
        height: 100%;
        cursor: pointer;
        display: flex;
        align-items: center;
        padding: 5px 20px;
        font-size: 15px;
        background-color: #589cf8;
        color: #fff;
        border-radius: 5px;

        .iconfont {
          font-size: 15px;
          color: #fff;
          margin-right: 5px;
        }
      }

      .btn2 {
        margin-left: 10px;
      }
    }

    .order_content {
      display: flex;
      align-items: center;

      .order_item {
        display: flex;
        align-items: center;
        color: #589cf8;
        cursor: pointer;

        .text {
          font-size: 14px;
          margin-left: 5px;
        }
      }
    }
  }

  .footer_wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
  }
}
</style>
